<template>
  <div class="screen" :style="screenStyle">
    <router-view />
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { useStore } from 'vuex'
import { ref, onMounted, onBeforeUnmount, provide } from 'vue'
import { addResizeListener, removeResizeListener } from './tools/resize-event'

const store = useStore()
const screenStyle = ref({})

provide('screen-style', screenStyle)

const screenResizeAction = () => {
  try {
    const rate = window['designWidth'] / window['designHeight']
    const width =
      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

    const height =
      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

    if (width / height > rate) {
      const widthValue = Math.floor(height * rate)
      screenStyle.value = {
        width: widthValue + 'px',
        height: height + 'px',
        left: (width - widthValue) / 2 + 'px'
      }
    } else {
      const heightValue = Math.floor(width / rate)
      screenStyle.value = {
        width: width + 'px',
        height: heightValue + 'px',
        top: (height - heightValue) / 2 + 'px'
      }
    }
  } catch (error) {
    console.log(error)
  }
}

const screenResize = _.debounce(screenResizeAction, 400, { trailing: true })

onMounted(() => {
  store.dispatch('updateOptions')
  store.dispatch('userLogin')
  screenResizeAction()
  addResizeListener(document.body, screenResize)
})

onBeforeUnmount(() => {
  removeResizeListener(document.body, screenResize)
})
</script>

<style lang="scss">

</style>
